<template>
  <div class="home">
    <h1>产品</h1>
       <ul>

           <p v-for="product in products">
                {{product.name}}-{{product.price}}&nbsp;<input type="submit" @click="add_good(product)" value="添加到购物车">
           </p>
       </ul>
       <hr>
       <h1>购物车</h1>
       {{my_goods_number}}
       <ul v-if="my_goods_number>0">
        
        <p v-for="good in my_goods">
            {{good.name}}-单价:{{good.price}}-数量：{{good.number}}&nbsp;<input type="submit" @click="add_num(good)" value="+">&nbsp;<input type="submit" @click="sub_num(good)" value="-">&nbsp;<input type="submit" @click="del_good(good)" value="删除">
        </p>
        <p>总价：{{getCount}}</p>
       </ul>
       <ul v-else>您的购物车是空的</ul>

  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["products"]), // 将 count 映射为计算属性
    ...mapState(["my_goods"]),
    ...mapState(["my_goods_number"]),
    ...mapGetters(["getCount"]), // 将 getCount 映射为计算属性
  },

  methods: {
    ...mapMutations(["add_good", "del_good","add_mum","sub_num"]), 
    add_good(good) {
      console.log(good);
      this.$store.commit('add_good',good); // 调用 mutation 的 increment 方法
    },
    del_good(good) {
      this.$store.commit('del_good',good); // 调用 mutation 的 decrement 方法
    },
    add_num(good) {
      this.$store.commit('add_num',good); // 调用 action 的 incrementAsync 方法
    },
    sub_good(good) {
      this.$store.commit('sub_good',good); // 调用 action 的 decrementAsync 方法
    },
  },
};
</script>